<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #mycanvas{
            cursor: pointer;
            margin: 100px;
            padding: 100px;
        }
    </style>
</head>
<body>
<canvas id="mycanvas" width='100' height='45'></canvas>
<script>
    function rand(){
        var str="abcdefghijklmnopqrstuvwxyz0123456789";
        var arr=str.split("");
        var validate="";
        var ranNum;
        for(var i=0;i<6;i++){
            ranNum=Math.floor(Math.random()*str.length);
            validate+=arr[ranNum];
        }
        return validate;
    }

    function lineX(){
        var ranLineX=Math.floor(Math.random()*90);
        return ranLineX;
    }
    function lineY(){
        var ranLineY=Math.floor(Math.random()*40);
        return ranLineY;
    }
    function clickChange(){
        var mycanvas=document.getElementById('mycanvas');
        var cxt=mycanvas.getContext('2d');
        cxt.fillStyle='#000';
        cxt.fillRect(0,0,100,40);
        for(var j=0;j<20;j++){
            cxt.strokeStyle='#fff';
            cxt.beginPath();
            cxt.moveTo(lineX(),lineY());
            cxt.lineTo(lineX(),lineY());
            cxt.lineWidth=0.5;
            cxt.closePath();
            cxt.stroke();
    }
        cxt.fillStyle="#ccc";
        cxt.font='bold 20px Arial';
        cxt.fillText(rand(),25,25);
    }
    clickChange();
    mycanvas.onclick=function(e){
        e.preventDefault();
        clickChange();
};
</script>
</body>
</html>